<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../css/reset.css">
    <style>
        .wrap {
            padding: 20px;
        }

        .group>button+button {
            margin-left: 10px;
        }

        .slide {
            margin-top: 20px;
            width: 1100px;
            height: 100px;
            border: 1px solid #333;
            border-top: 0;
            position: relative;
        }

        .ball {
            width: 100px;
            height: 100px;
            background-color: #6ff;
            border-radius: 50%;
            position: absolute;
            left: 0px;
            top: 0;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="group">
            <button class="start">开始</button>
            <button class="pause">暂停</button>
            <button class="back">返回</button>
        </div>
        <div class="slide">
            <div class="ball"></div>
        </div>
    </div>
</body>
<script>
    // JS运动 => 每间隔一段时间,更新元素的位置

    // 1. 每间隔一段时间 => 计时器
    // 2.如何改变元素的位置 => position

    var start = document.getElementsByClassName("start")[0];
    var pause = document.getElementsByClassName("pause")[0];
    var back = document.getElementsByClassName("back")[0];
    var ball = document.getElementsByClassName("ball")[0];

    var timer = null;

    // 点击开始 
    // 从当前位置(0) -> 最右边(终点 left = 1000)   => 终点值>起始值 =>正向运动(speed>0) 
    start.onclick = function () {
        var cur = ball.offsetLeft;  // 1. 记录小球的起始位置  2. 记录每隔10ms之后的位置
        var end = 1000;
        var speed = 11; // 每间隔一段时间 移动的距离

        clearInterval(timer);
        timer = setInterval(function () {
            // ball.style.left = (ball.offsetLeft + speed) + "px";

            cur += speed;
            ball.style.left = cur + "px";


            // 问题:
            // 如果运动的距离(1000) 不是速度(11)的整数倍 => 可能存在超出情况
            // 1000  => 11  => 90次之后90*11 = 990  => 在运动一次就超了  1001
            // 1. 如果超出终点 => 强制到达终点
            // if (cur >= end) {
            //     clearInterval(timer);
            //     ball.style.left = end + "px";
            // }

            // 2. 理想情况下  cur == end   => 如果运动的距离(1000) 不是速度(11)的整数倍 => 不行 => 设置误差允许范围
            // |cur - end| <= |speed|    => 再跑依次肯定超  => 直接到达终点

            if (Math.abs(cur - end) <= Math.abs(speed)) {
                clearInterval(timer);
                ball.style.left = end + "px";
            }
        }, 10);

    }

    pause.onclick = function () {
        clearInterval(timer)
    }

    // 点击返回
    // 从当前位置 -> 最左边(终点 left = 0)   =>  终点值<起始值 =>反向运动(speed<0) 
    back.onclick = function () {
        var cur = ball.offsetLeft;  // 1. 记录小球的起始位置  2. 记录每隔10ms之后的位置
        var end = 0;
        var speed = -11; // 每间隔一段时间 移动的距离

        clearInterval(timer);
        timer = setInterval(function () {
            // ball.style.left = (ball.offsetLeft + speed) + "px";

            cur += speed;
            ball.style.left = cur + "px";


            // 问题:
            // 如果运动的距离(1000) 不是速度(11)的整数倍 => 可能存在超出情况
            // 1000  => 11  => 90次之后90*11 = 990  => 在运动一次就超了  1001
            // 1. 如果超出终点(<=0) => 强制到达终点
            // if (cur <= end) {
            //     clearInterval(timer);
            //     ball.style.left = end + "px";
            // }

            // 2. 理想情况下  cur == end   => 如果运动的距离(1000) 不是速度(11)的整数倍 => 不行 => 设置误差允许范围
            // |cur - end| <= |speed|    => 再跑依次肯定超  => 直接到达终点

            if (Math.abs(cur - end) <= Math.abs(speed)) {
                clearInterval(timer);
                ball.style.left = end + "px";
            }
        }, 10);
    }

</script>

</html>